<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <title>购物车页面</title>
    <style>
      body {
        font-family: Arial, sans-serif;
      }
      .bigbox {
        width: 80%;
        margin: 20px auto;
        border: 1px solid #ddd;
        padding: 20px;
      }
      table {
        width: 100%;
        border-collapse: collapse;
      }
      th,
      td {
        text-align: left;
        padding: 8px;
        border-bottom: 1px solid #ddd;
      }
      .bigbox tr:hover {
        background-color: #bab7b7;
      }
      .bigbox th {
        background-color: rgb(169, 165, 165);
      }
      .tr-number input {
        width: 50px;
        text-align: center;
      }
      .actions {
        text-align: right;
        margin-top: 10px;
      }
      .clear-bigbox {
        cursor: pointer;
        color: red;
      }
      .highlight {
        background-color: #e0e0e0;
      }
    </style>
  </head>
  <body>
    <div class="bigbox">
      <table>
        <thead>
          <tr>
            <th>
              <input type="checkbox" name="" id="allcheck" />
            </th>
            <th>编号</th>
            <th>商品名称</th>
            <th>单价</th>
            <th>数量</th>
            <th>小计</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody></tbody>
      </table>
      <div class="actions">
        <span class="clear-bigbox" onclick="clear()">帮你清空购物车</span>
      </div>
      <div>
        <p>总计：￥ <span id="allprice">0.00</span></p>
      </div>
    </div>
    <script>
      // 数据驱动
      var date = [
        {
          id: "B1",
          name: "电视",
          price: "1000.00",
          number: "0",
          allprice: "0",
          isChecked: false,
        },
        {
          id: "B2",
          name: "手机",
          price: "5000.00",
          number: "0",
          allprice: "0",
          isChecked: false,
        },
        {
          id: "B3",
          name: "平板",
          price: "10000.00",
          number: "0",
          allprice: "0",
          isChecked: false,
        },
      ];
      function fn() {
        var html = "";
        for (var i = 0; i < date.length; i++) {
          html += `
        <tr>
          <td><input type="checkbox" name="" id="check" ${
            date[i].isChecked ? "checked" : ""
          } 
         ></td>
          <td>${date[i].id}</td>
          <td>${date[i].name}</td>
          <td>￥${date[i].price}</td>
          <td><button>-</button>
            ${date[i].number}
            <button>+</button></td>
          <td>￥${date[i].allprice}</td>
          <td><button>删除</button></td>
        </tr>
          `;
        }
        document.querySelector("tbody").innerHTML = html;
      }
      fn();
      // 多选框
    </script>
  </body>
</html>
